<template>
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">概况</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/orderCharge' }"
        >订单管理</el-breadcrumb-item
      >
      <el-breadcrumb-item><a href="/">订单详情</a></el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div><h1>订单详情</h1></div>
      <div class="userInfo">
        <div><span>用户信息</span></div>
        <div class="yonghuxingming">
          <div>用户姓名 :{{ userForm.customerName }}</div>
          <div>联系电话 :{{ userForm.phone }}</div>
        </div>
        <div style="margin-bottom:20px">联系地址 :{{ userForm.address }}</div>
      </div>
      <div class="userInfo">
        <div><span>订单信息</span></div>
        <div class="yonghuxingming">
          <div>订单编号 :{{ orderForm.orderNum }}</div>
        </div>
        <div class="yonghuxingming" style="margin-bottom:20px">
          <div>成交时间 :{{ orderForm.dealTime }}</div>
          <div>付款时间 :{{ orderForm.payTime }}</div>
        </div>
      </div>
      <el-table :data="orderTable">
        <el-table-column prop="goodsName" label="商品"> </el-table-column>
        <el-table-column prop="price" label="价格">
          <template slot-scope="scope">
            <div>{{ scope.row.price.xianjin }}现金</div>
            <div>{{ scope.row.price.jifen }}积分</div>
          </template>
        </el-table-column>
        <el-table-column prop="num" label="数量"> </el-table-column>
        <el-table-column prop="price" label="实付款">
          <template slot-scope="scope">
            <div>{{ scope.row.price.xianjin }}现金</div>
            <div>{{ scope.row.price.jifen }}积分</div>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="付款方式">
          <template slot-scope="scope">
            <div>{{ scope.row.payWays.weixin }}</div>
            <div>{{ scope.row.payWays.jifen }}</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="shifukuandiv">
        <span>实付款:{{ jifentotal }}积分 + {{ xianjinTotal }}现金</span>
      </div>
      <div>
        <el-button type="success" @click="kuaidDIalog = true"
          >填写快递信息</el-button
        >
      </div>
      <div>
        <div>
          快递信息
        </div>
        <div>快递单号: {{ kuaiduFOrm.kuaidiNum }}</div>
        <div>快递公司: {{ kuaiduFOrm.kuaidiGS }}</div>
        <div>发货时间: {{ kuaidiTIme }}</div>
      </div>
      <el-dialog
        title="填写快递信息"
        :visible.sync="kuaidDIalog"
        width="30%"
        :before-close="handleClose"
        center
      >
        <el-form :model="kuaiduFOrm" label-position="left" label-width="80px">
          <el-form-item label="快递单号">
            <el-input
              v-model="kuaiduFOrm.kuaidiNum"
              style="width:217px"
            ></el-input>
          </el-form-item>
          <el-form-item label="快递公司">
            <el-select v-model="kuaiduFOrm.kuaidiGS">
              <el-option label="韵达" value="韵达"></el-option>
              <el-option label="百世" value="韵达"></el-option>
              <el-option label="顺丰" value="韵达"></el-option>
              <el-option label="京东" value="韵达"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="快递单">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="kuaidDIalog = false">取 消</el-button>
          <el-button type="primary" @click="submitKuai()">提交</el-button>
        </span>
      </el-dialog>
      <el-dialog width="30%" :visible.sync="innerVisible" title="提交快递信息">
        <div class="kuaiddanhaojuzhong">
          <div class="kuaidiqueren">
            <span>快递单号: {{ kuaiduFOrm.kuaidiNum }}</span>
          </div>
          <div>请确认以上快递单号准确无误，一旦提交无法修改！</div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="innerVisible = false"
            >确定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      innerVisible: false,
      dialogImageUrl: "",
      dialogVisible: false,
      kuaiduFOrm: {},
      kuaidDIalog: false,
      userForm: {
        customerName: "陈晓芳",
        phone: "17812621418",
        address: "广东省珠海市香洲区吉大街道君怡花园1栋1601"
      },
      orderForm: {
        orderNum: "45613289",
        dealTime: "2021-01-28 16:22:21",
        payTime: "2021-01-28 16:22:21"
      },
      orderTable: [
        {
          goodsName: "托马斯玩具儿童3岁益智男孩",
          price: {
            jifen: "4320",
            xianjin: "20"
          },
          payWays: {
            weixin: "微信",
            jifen: "积分"
          },
          num: "1"
        }
      ]
    };
  },
  created() {},
  computed: {
    jifentotal: function() {
      return this.orderTable[0].price.jifen;
    },
    kuaidiTIme: function() {
      return this.dateFormat("YYYY-mm-dd HH:MM", new Date());
    },
    xianjinTotal: function() {
      return this.orderTable[0].price.xianjin;
    }
  },
  methods: {
    submitKuai() {
      this.kuaidDIalog = false;
      this.innerVisible = true;
    },
    handleClose() {
      console.log("666");
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    dateFormat(fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    }
  }
};
</script>

<style lang="scss" scoped>
.shifukuandiv {
  display: flex;
  justify-content: flex-end;
  margin-right: 30px;
  span {
    font-size: 24px;
    color: red;
  }
  padding-bottom: 30px;
  border-bottom: 1px solid #c9c9c9;
}
.userInfo {
  border-bottom: 1px solid #d6d6d6;
}
.yonghuxingming {
  display: flex;
  :nth-child(2) {
    margin-left: 50px;
  }
}
.el-card {
  div {
    margin-top: 6px;
  }
}
.kuaidiqueren {
  background-color: #d2f2ef;
}
.kuaiddanhaojuzhong {
  width: 370px;
  margin-left: 80px;
  div {
    text-align: center;
    font-size: 18px;
  }
}
</style>
